<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>登录</title>
		<link rel="icon" href="favicon.ico" type="image/ico">
		<meta name="author" content="kitten">
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/materialdesignicons.min.css" rel="stylesheet">
		<link href="css/style.min.css" rel="stylesheet">
		<style>
			.lyear-wrapper {
				position: relative;
			}

			.lyear-login {
				display: flex !important;
				min-height: 100vh;
				align-items: center !important;
				justify-content: center !important;
			}

			.lyear-login:after {
				content: '';
				min-height: inherit;
				font-size: 0;
			}

			.login-center {
				background: #fff;
				min-width: 29.25rem;
				padding: 2.14286em 3.57143em;
				border-radius: 3px;
				margin: 2.85714em;
			}

			.login-header {
				margin-bottom: 1.5rem !important;
			}

			.login-center .has-feedback.feedback-left .form-control {
				padding-left: 38px;
				padding-right: 12px;
			}

			.login-center .has-feedback.feedback-left .form-control-feedback {
				left: 0;
				right: auto;
				width: 38px;
				height: 38px;
				line-height: 38px;
				z-index: 4;
				color: #dcdcdc;
			}

			.login-center .has-feedback.feedback-left.row .form-control-feedback {
				left: 15px;
			}
		</style>
	</head>

	<body>
		<div class="row lyear-wrapper" style="background-image: url(images/login-bg.jpg); background-size: cover;">
			<div class="lyear-login">
				<div class="login-center">
					<div class="login-header text-center">
						<!-- <a href="javascript:void(0);"> <img alt="light year admin" src="images/logo.jpg"> </a> -->
						<h1>党员发展可视化管理系统</h1>
					</div>
					<form action="#!" method="post">
						<div class="form-group has-feedback feedback-left">
							<input type="text" placeholder="请输入您的用户名" class="form-control" name="username" id="username"
								autocomplete="off" />
							<span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
						</div>
						<div class="form-group has-feedback feedback-left">
							<input type="password" placeholder="请输入密码" class="form-control" id="password"
								name="password" autocomplete="off" />
							<span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
						</div>
						<div class="form-group has-feedback feedback-left">
							<select class="form-control formRowRight" id="role">
								<option>党支部</option>
								<option>管理员</option>
							</select>
							<span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
						</div>
						<div class="form-group">
							<button class="btn btn-block btn-primary" type="button" id="login">立即登录</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript">
			$("#login").click(function() {
				let username = $("#username").val();
				let password = $("#password").val();
				let role = $("#role option:selected").val();
				var user = {};
				user.account = username;
				user.pwd = password;
				user.role = role;
				$.ajax({
					url: "http://127.0.0.1:8081/user/login",
					async: false,
					type: "POST",
					contentType: 'application/json',
					dataType: 'json',
					data: JSON.stringify(user),
					success: function(json) {
						if (json.returnCode == 200) {
							sessionStorage.setItem("user", JSON.stringify(json.user));
							sessionStorage.setItem("userId", json.user.id);
							location.href = "index.html";

						} else {
							alert('用户名或密码错误!');
						}
					}
				});
			});
		</script>
	</body>
</html>
